import React, { Component } from 'react';
import {connect} from 'react-redux'
import { Card, Button, Table ,Modal,Input,Tag,Select,Form, message} from 'antd';
import { PlusCircleOutlined ,ExclamationCircleOutlined} from '@ant-design/icons'



import {GetCategoryList,UpdateCategory,Addcategory} from '../../../reudx/action'
import MyBtn from '../../../component/mybutton/mybutton'
import './category.less';

const { Option } = Select;

class Category extends Component {
    //修改框发生变化的监听函数
    onChangeUpdateName = (event)=>{
        let text = event.target.value
        //console.log(text)
        //修改状态
        this.setState({updateCategoryName:text})
    }
    //添加框选择变化的回调函数
    onChangeNum = (value,option)=>{
        //console.log(value,option)
        this.setState({num:option.key})
    }
    onChangeName = (event)=>{
        let text = event.target.value
        //console.log(text)
        //修改状态
        this.setState({addCategoryName:text})
    }
    //调试数据
    state = {
        cateGory:[
            {
                key: '1',
                name: '家用电器',
                id:1
            },
            {
                key: '2',
                name: '电脑',
                id:1
            },
            {
                key: '3',
                name: '图书',
                id:1
            },
            {
                key: '4',
                name: '服装',
                id:1
            },
            {
                key: '5',
                name: '食品',
                id:1
            },
            {
                key: '6',
                name: '玩具',
                id:1
            },
        ],
        num:'0',//存储添加框中选择的分类级别
        addCategoryName:'',//添加分类的名字
        updateCategoryName:'',//修改分类的名字
        loading:false,//是否正在加载数据
        parentId:'0',//表示分类的id
        title:'',//子列表的头部信息
    }
    //查找分类，二级分类
    searchCategory = (category)=>{
        //console.log("当前父分类的信息",category)
        //更新state中的分类id,分类头部信息
        this.setState({parentId:category._id,title:category.name},()=>{
            this.props.GetCategoryList(this.state.parentId)
        })
        //发送请求获取二级分类
        
    }
    //点击回退到一级分类
    showCategory = ()=>{
        this.setState({parentId:'0',title:''})
        this.props.GetCategoryList('0')
    }
    //将标题加载放在外面，放在willmount函数中，这个只需要加载一次就可以，放到render中就会导致每一次重新渲染就重新加载列表数据 
    create_colums = ()=>{
        const columns = [
            {
                title: '分类的名称',
                dataIndex: 'name',
                key: '_id',
                align:'center',
            },
            {
                title: '操作',
                key: 'action',
                align:'center',
                width:400,
                render: (item) => (<span><MyBtn onClick={()=>this.updateCategory(item)}>修改分类</MyBtn>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    {
                        //如果是在二级目录下，就没有下一级目录，这样就没有这个功能按钮
                        this.state.parentId==='0'?<MyBtn onClick={()=>this.searchCategory(item)}>查看子分类</MyBtn>:null
                    }</span>),
            },
        ];
        return columns
    }
    componentWillMount(){
        this.columns = this.create_colums()
    }
    async componentDidMount(){
        this.setState({loading:true})
        //发送请求获取列表数据
        //等待获取列表的异步函数执行完成再更改状态，不然这设置效果无法看出
        //获取一级分类列表数据
        await this.props.GetCategoryList(this.state.parentId)
        this.setState({loading:false})
    }
    //添加分类的函数
    add = () => {
        //找出所有一级目录的_id,最后添加 ‘0’表示一级目录
        const selectMessage = this.props.cateGoryList.first.map((item)=>{
            return {name:item.name,id:item._id}
        })
        selectMessage.unshift({name:'一级目录',id:'0'})
        console.log("这是过滤之后的数组",selectMessage)
        //必须要获取所有一级分类标签的信息
        Modal.confirm({
            title: '添加分类',
            icon: <ExclamationCircleOutlined />,
            content: (<div className="tipContainer">
                        <div className="choose">
                        <Select style={{width:300}} defaultValue="一级目录"  onChange={this.onChangeNum}  >
                        {
                            selectMessage.map((item)=> <Option key={item.id} value={item.name}>{item.name}</Option>)
                        }
                        </Select>
                        </div>
                        <Form style={{width:300}}>
                        <Form.Item name={'用户名'} label="新增分类名称" rules={[{ required: true,message: '请输入分类名称'  }]}>
                            <Input onChange={this.onChangeName} />
                        </Form.Item>
                        </Form>
                    </div>),
            okText: '确认',
            cancelText: '取消',
            onCancel:()=>{
                //清空状态即可
                this.setState({addCategoryName:'',num:'0'})
            },
            onOk:()=>{
                //console.log("这是要提交的名字",this.state.addCategoryName)

                if(!this.state.addCategoryName.trim()){
                    message.error("请输入分类名字")
                    //console.log("名字没输入就想提交？")
                }else{
                     //提交数据
                    Addcategory({parentId:this.state.num,categoryName:this.state.addCategoryName})
                    //将原有信息清空
                    this.setState({num:'0',addCategoryName:''})
                }
               
            }
        });
    }
     //修改分类的函数
     updateCategory =(category)=>{
         //获取当前的_id
         const {_id} = category
         console.log("当前分类的id",_id)
         Modal.confirm({
            title: '添加分类',
            icon: <ExclamationCircleOutlined />,
            content: (
                        <Form style={{width:300}}>
                        <Form.Item  label="起一个新名字" rules={[{ required: true,message: '请输入分类名称'  }]}>
                            <Input onChange={this.onChangeUpdateName} />
                        </Form.Item>
                        </Form>
                    ),
            okText: '确认',
            cancelText: '取消',
            onCancel:()=>{
                //清空状态即可
                this.setState({updateCategoryName:''})
            },
            onOk:()=>{
                //console.log("这是要提交的名字",this.state.addCategoryName)

                if(!this.state.updateCategoryName.trim()){
                    message.error("请输入分类名字")
                    //console.log("名字没输入就想提交？")
                }else{
                    //提交的数据
                    console.log(_id,this.state.updateCategoryName)
                     //提交数据
                     UpdateCategory({categoryId:_id,categoryName:this.state.updateCategoryName})
                    //清空数据
                    this.setState({updateCategoryName:''})
                    //获取最新数据
                    this.props.GetCategoryList(this.state.parentId)
                }
               
            }
        });

     }
    render() {

        const {parentId,title} = this.state
        //console.log("这是当前页面的表格数据",this.props.cateGoryList)
        return (
            <Card title={<span>
                <Tag color="magenta" onClick={this.showCategory}><a>一级分类列表</a></Tag> 
                {parentId=='0'? null :<span className='iconfont icon-jiantouxiangyou-Arrowtotheright'>&nbsp;&nbsp;<Tag color="cyan">{title}</Tag></span> }
                </span>}
                 className="cardContanier" 
                 extra={<Button icon={<PlusCircleOutlined />} 
                 type="primary" onClick={this.add}>添加</Button>}>
                <Table 
                pagination ={{defaultPageSize:5,showQuickJumper:true}}
                loading ={this.state.loading} 
                bordered 
                dataSource={this.state.parentId==='0'?this.props.cateGoryList.first:this.props.cateGoryList.second} 
                columns={this.columns} 
                />
            </Card>
        )
    }
}
export default connect(
    state=>({cateGoryList:state.CategoryList}),
    {GetCategoryList}
)(Category)